📑 Summary

Currently, invalid shapes cause an error when rendering, but not when parsing. This confuses the Mermaid Live Editor, e.g. by not showing the error message.

Instead, I've added an isValidShape() that validates if the shape is valid at parse time. This only checks shapes using the new extended shapes syntax.

E.g.

const diagram = "flowchart TB\nA@{ shape: aaaa }";

// currently throws an error, and
// will continue to error after this PR is merged
mermaid.render(diagram); 

// currently works fine, but will error after this PR is merged
mermaid.parse(diagram); 

Example:

See mermaid.live

flowchart TB
      A@{ shape: aaaa }

As you can see, mermaid.live doesn't show an error message, even though the diagram failed to render:

📏 Design Decisions

I've used TypeScript to ensure that all the types are correct, with one issue:

Currently, using A(-this is an ellipse node-) is broken (see #5976) and also causes an invalid shape error at render time, but I've ignored it in this PR, so it will continue pass at parse-time (we have unit tests checking ellipse parsing).

The list of valid types for FlowVertex are all taken from:

• FlowVertexTypeParam:

  mermaid/packages/mermaid/src/diagrams/flowchart/parser/flow.jison

  Lines 428 to 458 in e765007

  	{$$ = $idString;yy.addVertex($idString,$text,'square');}
  	| idString DOUBLECIRCLESTART text DOUBLECIRCLEEND
  	{$$ = $idString;yy.addVertex($idString,$text,'doublecircle');}
  	| idString PS PS text PE PE
  	{$$ = $idString;yy.addVertex($idString,$text,'circle');}
  	| idString '(-' text '-)'
  	{$$ = $idString;yy.addVertex($idString,$text,'ellipse');}
  	| idString STADIUMSTART text STADIUMEND
  	{$$ = $idString;yy.addVertex($idString,$text,'stadium');}
  	| idString SUBROUTINESTART text SUBROUTINEEND
  	{$$ = $idString;yy.addVertex($idString,$text,'subroutine');}
  	| idString VERTEX_WITH_PROPS_START NODE_STRING\[field] COLON NODE_STRING\[value] PIPE text SQE
  	{$$ = $idString;yy.addVertex($idString,$text,'rect',undefined,undefined,undefined, Object.fromEntries([[$field, $value]]));}
  	| idString CYLINDERSTART text CYLINDEREND
  	{$$ = $idString;yy.addVertex($idString,$text,'cylinder');}
  	| idString PS text PE
  	{$$ = $idString;yy.addVertex($idString,$text,'round');}
  	| idString DIAMOND_START text DIAMOND_STOP
  	{$$ = $idString;yy.addVertex($idString,$text,'diamond');}
  	| idString DIAMOND_START DIAMOND_START text DIAMOND_STOP DIAMOND_STOP
  	{$$ = $idString;yy.addVertex($idString,$text,'hexagon');}
  	| idString TAGEND text SQE
  	{$$ = $idString;yy.addVertex($idString,$text,'odd');}
  	| idString TRAPSTART text TRAPEND
  	{$$ = $idString;yy.addVertex($idString,$text,'trapezoid');}
  	| idString INVTRAPSTART text INVTRAPEND
  	{$$ = $idString;yy.addVertex($idString,$text,'inv_trapezoid');}
  	| idString TRAPSTART text INVTRAPEND
  	{$$ = $idString;yy.addVertex($idString,$text,'lean_right');}
  	| idString INVTRAPSTART text TRAPEND
  	{$$ = $idString;yy.addVertex($idString,$text,'lean_left');}

  , or
• ShapeID type:

  mermaid/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts

  Line 493 in e765007

  export type ShapeID = keyof typeof shapes;

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests.
• 📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
  • Not needed, since this is a bug fix
• 🦋 If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.